<template>
    <div id="phoneVoice">
        <div>
            <van-config-provider :theme-vars="themeVars">
            <van-nav-bar
            title="音效与通知"
            left-arrow
            @click-left="onClickLeft"
            style="background-color: rgba(234, 233, 229);"
            />
            </van-config-provider>
        </div>
        <div style="margin-top: 20px;height: 70px;" class="van-hairline--bottom">
            <van-cell title="系统内音效" center label="如系统内刷新、新消息、点赞等音效">
            <template #right-icon>
                <van-switch v-model="checked1" size="24px" active-color="#c1ab96" inactive-color="#ebe9e5"/>
            </template>
            </van-cell>
        </div>
        <div class="van-hairline--bottom" style="height:70px">
            <van-cell title="新消息提醒" center label="关闭后，程序不运行时将无法收到提醒">
            <template #right-icon>
                <van-switch v-model="checked2" size="24px" active-color="#c1ab96" inactive-color="#ebe9e5"/>
            </template>
            </van-cell>
        </div>
        <div class="van-hairline--bottom" style="height:70px">
            <van-cell title="应用内横幅提醒" center label="关闭后，应用运行时的提醒将不会以横幅形式展现">
            <template #right-icon>
                <van-switch v-model="checked3" size="24px" active-color="#c1ab96" inactive-color="#ebe9e5"/>
            </template>
            </van-cell>
        </div>
        <div class="van-hairline--bottom" style="height:70px">
            <van-cell title="声音提醒">
            <template #right-icon>
                <van-switch v-model="checked4" size="24px" active-color="#c1ab96" inactive-color="#ebe9e5"/>
            </template>
            </van-cell>
        </div>
        <div class="van-hairline--bottom" style="height:70px">
            <van-cell title="震动提醒">
            <template #right-icon>
                <van-switch v-model="checked5" size="24px" active-color="#c1ab96" inactive-color="#ebe9e5"/>
            </template>
            </van-cell>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
const themeVars = {
    fontWeightBold:'bolder',
    navBarTitleFontSize:'20px',
}
let onClickLeft = ()=>{
    history.back();
}
let checked1 = ref(true)
let checked2 = ref(false)
let checked3 = ref(true)
let checked4 = ref(true)
let checked5 = ref(true)
</script>
<style scoped>
    
</style>